<template>
  <div>
    <van-tree-select
      :items="datas"
      :active-id.sync="activeIds"
      :main-active-index.sync="activeIndex"
      @click-nav="onClickNav"
      @click-item="onClickItem"
    >
      <template #content v-if="activeIndex>=0 && datas[activeIndex].children[0].children">
        <van-tree-select
          :items="datas[activeIndex].children"
          :active-id.sync="activeIds_2"
          :main-active-index.sync="activeIndex_2"
          @click-nav="onClickNav"
          @click-item="onClickItem"
        >
          <template
            #content
            v-if="activeIndex_2>0 && datas[activeIndex].children[activeIndex_2].children[0].children"
          ></template>
        </van-tree-select>
      </template>
    </van-tree-select>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      idx: 0,
      datas: [],
      activeIds: [],
      activeIndex: 0,
      activeIds_2: [],
      activeIndex_2: 0,
      ids: [
        {
          ids: [],
          index: 0
        },
        {
          ids: [],
          index: 0,
          children: [
            {
              ids: [],
              index: 0
            },
            {
              ids: [],
              index: 0
            }
          ]
        }
      ],
      index: [
        {
          index: 0,
          children: [
            {
              index: 0
            }
          ]
        },
        {
          index: 0,
          children: [
            {
              index: 0
            }
          ]
        }
      ]
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    setTimeout(() => {
      this.datas = [
        {
          text: 'A',
          id: 1,
          children: [
            {
              text: 'A-1',
              id: 2
            },
            {
              text: 'A-2',
              id: 3
            }
          ]
        },
        {
          text: 'C',
          id: 9,
          children: [
            {
              text: 'C-1',
              id: 10,
              children: [
                {
                  text: 'C-1-1',
                  id: 11
                },
                {
                  text: 'C-1-2',
                  id: 12
                }
              ]
            },
            {
              text: 'C-2',
              id: 13,
              children: [
                {
                  text: 'C-2-1',
                  id: 14
                },
                {
                  text: 'C-2-2',
                  id: 15
                }
              ]
            }
          ]
        }
      ]
    }, 3000)
  },
  methods: {
    onClickNav(para1) {
      console.log('Nav Click')
      console.log(para1)
      console.log(`${this.activeIds}`)
      console.log(`${this.activeIndex}`)
      console.log(`${this.activeIds_2}`)
      console.log(`${this.activeIndex_2}`)
    },
    onClickItem(para1) {
      console.log('Item Click')
      console.log(para1)
      console.log(`${this.activeIds}`)
      console.log(`${this.activeIndex}`)
      console.log(`${this.activeIds_2}`)
      console.log(`${this.activeIndex_2}`)
    }
  }
}
</script>

<style lang="less" scoped>
</style>
